<template>
  <el-card class="card">
    <sapn class="pbtn"></sapn>
    <span style="font-size: 20px; margin-bottom: 20px;">系统公告</span>
    <el-form>
      <el-form-item>
        <el-col span="6" style="margin-top: 8px;">
          <sapn>发布日期</sapn>
        </el-col>

        <el-col span="6">
          <DatePicker></DatePicker>
        </el-col>
        <el-col span="6">
          <el-autocomplete style="margin-left: 20px;width: 300px;line-height: 55px; height: 50px;"
            v-model="articleList.searchKey" :fetch-suggestions="querySearch" popper-class="my-autocomplete"
            placeholder="请输入关键字" @select="handleSelect">
            <template #suffix>
              <el-icon @click="handleIconClick">
                <Search />
              </el-icon>
              &nbsp;&nbsp;
              <el-icon @click="cancelIconClick">
                <Close />
              </el-icon>
            </template>
          </el-autocomplete>
        </el-col>
        <el-col span="6" style="margin-left: 4%;">
          <el-button @click="publishText" style="width: 120px;height:50px;border-radius: 20px;"
            type="primary">新增系统公告</el-button>
          <el-button style="width: 120px;height:50px;border-radius: 20px;" @click="exportXlsx">导出</el-button>
        </el-col>
      </el-form-item>
    </el-form>
    <el-table :data="allAnnouncementList.result" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="消息标题" prop="title" width="150px"></el-table-column>
      <el-table-column property="content" label="消息内容" width="400" />
      <el-table-column property="publisher" label="发布人" show-overflow-tooltip />
      <el-table-column property="status" label="状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column property="updateTime" label="操作时间" show-overflow-tooltip />
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <el-button type="primary" link @click="editArticleList(scope.row)">编辑</el-button>
          <el-button type="danger" link @click="deleteArticleList(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :list="articleList" :res="allAnnouncementList" @changeCount="changeCount" @changePage="changePage" />

  </el-card>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue'
import api from '@/api'
import { LabelSearchType, LabelReaultType } from '@/types/ccc/lable'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DatePicker from '../ccc/DatePicker.vue';
import * as XLSX from "xlsx";
import Pagination from '../ccc/Pagination.vue'
const router = useRouter()
const publishText = () => {
  router.push('xtgg/addAnnouncement')
}
const articleList = reactive<LabelSearchType>({
  searchKey: '',
  page: 1,
  count: 10
})
const allAnnouncementList = reactive<LabelReaultType>({
  total: 0,
  totalPage: 0,
  result: []
})
const getAllAnnouncement = async () => {
  const result = await api.systemSetting.announcement.getAllAnnouncementApi(articleList)
  console.log(result.data.data);
  allAnnouncementList.result = result.data.data.result
  allAnnouncementList.total = result.data.data.total
  allAnnouncementList.totalPage = result.data.data.totalPage
}
onMounted(() => {
  getAllAnnouncement()
})


const editArticleList = async (item: any) => {
  console.log(item);
  item = JSON.stringify(item)
  localStorage.setItem('item', item)
  router.push('xtgg/editAnnouncement')

  //const result=await api.systemSetting.article.getAllArticleApi()
}
const deleteArticleList = async (id: number) => {
  console.log(id);
  const result = await api.systemSetting.announcement.delAnnouncementByIdApi(id)
  console.log(result);
  if (result.data.code === 200) {
    ElMessage.success(result.data.msg)

  } else {
    ElMessage.warning(result.data.msg)

  }
  getAllAnnouncement()
}
const exportXlsx = () => {
  const data = XLSX.utils.json_to_sheet(allAnnouncementList.result)//此处res.result为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
  XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名
}




interface LinkItem {
  value: string
  link: string
}

const links = ref<LinkItem[]>([])

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value
  // call callback function to return suggestion objects
  cb(results)
}
const createFilter = (queryString: any) => {
  return (restaurant: any) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelect = (item: LinkItem) => {
  console.log(item)
}

const handleIconClick = (ev: Event) => {
  console.log(ev)
  console.log(articleList.searchKey);
  getAllAnnouncement()

}
const cancelIconClick = () => {
  articleList.searchKey = ''
  getAllAnnouncement()


}
// 修改当前页数
const changeCount = (arg: number) => {
  articleList.count = arg
  getAllAnnouncement()

}
// 修改当前页数
const changePage = (arg: number) => {
  articleList.page = arg
  getAllAnnouncement()
}

</script>

<style lang='scss' scoped>
.card {
  width: 1150px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  min-height: 100vh;
}

.pbtn {
  display: inline-block;
  width: 8px;
  height: 18px;
  border-radius: 20px;
  background-color: #409eff;
  margin-right: 10px;
}
</style>